<template>
  <div class="box-main">
    <div class="flex-1">
      <div class="list">
        <div class="list-item" v-for="v in 3" :key="v">
          <div class="list-item-avatar">
            <img class="list-item-avatar-img" src="@/assets/images/comm/avatar.png" alt="" />
            <img class="list-item-avatar-tag" src="@/assets/images/OpenCloseFriend/icon3.png" alt="" />
            <img class="list-item-avatar-icon3" v-if="v == 2" src="@/assets/images/Container/icon3.png" alt="" />
          </div>
          <div class="list-item-name">帅哥一号</div>
          <div class="list-item-content">
            <p class="list-item-content-label">TOP {{ v }}</p>
            <div class="list-item-content-value">
              <img class="list-item-content-value-img" src="@/assets/images/Container/icon4.png" alt="" />
              <p>3000</p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-list">
        <div class="card-list-item" v-for="v in 9" :key="v">
          <div class="card-list-item-avatar">
            <img class="card-list-item-avatar-img" :src="getImageUrl(v < 6 ? 'comm/avatar.png' : 'Container/icon2.png')" alt="" />
            <img class="card-list-item-avatar-tag" v-if=" v< 6" src="@/assets/images/OpenCloseFriend/icon3.png" alt="" />
          </div>
          <div class="card-list-item-name">
            <span v-if="v < 5">小兔姐姐</span>
            <img v-else class="card-list-item-name-tag" src="@/assets/images/OpenCloseFriend/icon3.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="btn">为他开通密友位置</div>
  </div>
</template>
<script setup>
const getImageUrl = (name) => {
  return new URL(`../../assets/images/${name}`, import.meta.url).href
}
</script>
<style lang="scss" scoped>
.box-main {
  min-height: 100vh;
  padding: 3.08rem 3.33rem 8.46rem;
  box-sizing: border-box;
  background-image: url('@/assets/images/Container/icon1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;

  .flex-1 {
    min-height: calc(100vh - 28.62rem);
    flex: 1;
  }

  .list {
    padding-top: 31.11rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 8.2rem;

    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      &-avatar {
        width: 18.49rem;
        height: 18.49rem;
        background: transparent;
        border: 0.51rem solid #FFF;
        box-shadow: 0 0 1.4rem .1rem white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &-img {
          width: 16.41rem;
          height: 16.41rem;
          display: block;
          object-fit: cover;
        }

        &-tag {
          width: 11.28rem;
          height: 3.59rem;
          display: block;
          position: absolute;
          bottom: -0.8rem;
        }

        &-icon3 {
          width: 5.64rem;
          height: 4.36rem;
          display: block;
          position: absolute;
          right: 3rem;
          top: -1rem;
        }
      }

      &-name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 3.59rem;
        color: #333333;
        line-height: 5.13rem;
        margin-top: 3.59rem;
      }

      &-content {
        font-size: 3.08rem;
        color: #FFFFFF;
        line-height: 3.08rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 11.79rem;

        &-label {
          font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
          font-weight: 700;
        }

        &-value {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          display: flex;
          align-items: center;
          margin-top: 2.05rem;

          &-img {
            width: 3.59rem;
            height: 3.08rem;
            display: block;
            margin-right: 1.03rem;
          }
        }
      }

      &:nth-child(2) {
        transform: translateY(-10rem);

        .list-item-avatar {
          width: 22.56rem;
          height: 22.56rem;

          &-img {
            width: 20.49rem;
            height: 20.49rem;
          }
        }
      }
    }
  }

  .card-list {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2.56rem;
    padding: 8.46rem 6.15rem;
    display: flex;
    flex-wrap: wrap;
    gap: 4.62rem 10.26rem;

    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      &-avatar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        &-img {
          width: 12.31rem;
          height: 12.31rem;
          display: block;
        }

        &-tag {
          width: 8.21rem;
          height: 3.08rem;
          display: block;
          position: absolute;
          bottom: -1rem;
        }
      }

      &-name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 3.08rem;
        color: #333333;
        line-height: 3.08rem;
        margin-top: 3.08rem;
        &-tag {
          width: 8.21rem;
          height: 3.08rem;
          display: block;
        }
      }
    }
  }

  .btn {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 82.05rem;
    height: 13.08rem;
    background: linear-gradient(90deg, #D4B6F3 0%, #C696F6 100%);
    border-radius: 8.46rem 8.46rem 8.46rem 8.46rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 4.1rem;
    color: #FFFFFF;
    line-height: 13.08rem;
    text-align: center;
    margin-top: 4rem;
  }
}
</style>